<template>
    <div class="footer">
        <div class="footer-wrap">
            <div class="footer-top">
                <div class="footer-top-pic">
                    <div class="footer-top-pic-left">
                        <img src="../assets/imgs/home/contactus.png" alt="">
                        <div class="contact-me">
                            <div class="custom-log"></div>
                            联系我们
                        </div>
                    </div>
                    <div class="erweima">
                        <div class="erweima-left">
                            <p>想要了解更多资讯</p>
                            <p>欢迎关注云浩官方微信</p>
                        </div>
                        <div class="ermeima-wrap">
                            <ul>
                                <li>
                                    <img src="../assets/imgs/home/mbmh.png" alt="">
                                    <p>记得关注我们美美哦~</p>
                                </li>
                                <li>
                                    <img src="../assets/imgs/home/yunhao_ewm.png" alt="">
                                    <p>别忘记还有我们浩浩~</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="footer-contacts">
                    <ul>
                        <li>
                            <div class="contact-item-top">
                                <span class="iconfont gongzuoshijian"></span>
                                <p>工作时间</p>
                            </div>
                            <div class="contact-item-bottom">
                                <p>周一至周日</p>
                                <p>09:00-21:00</p>
                            </div>
                        </li>
                        <li>
                            <div class="contact-item-top">
                                <span class="iconfont dianhua"></span>
                                <p>联系电话</p>
                            </div>
                            <div class="contact-item-bottom">
                                <p>400-800-3826</p>
                            </div>
                        </li>
                        <li>
                            <div class="contact-item-top">
                                <span class="iconfont qq"></span>
                                <p>企业Q Q</p>
                            </div>
                            <div class="contact-item-bottom">
                                <p>4008003826</p>
                            </div>
                        </li>
                        <li>
                            <div class="contact-item-top">
                                <span class="iconfont shouhouwuyou"></span>
                                <p>售后电话</p>
                            </div>
                            <div class="contact-item-bottom">
                                <p>028-69862368</p>
                                <p>028-69862369</p>
                            </div>
                        </li>
                        <li>
                            <div class="contact-item-top">
                                <span class="iconfont zixun"></span>
                                <p>咨询电话</p>
                            </div>
                            <div class="contact-item-bottom">
                                <p>1508280685</p>
                                <p>（冉总）</p>
                            </div>
                        </li>
                        <li>
                            <div class="contact-item-top">
                                <span class="iconfont gongzhonghao"></span>
                                <p>售后微信</p>
                            </div>
                            <div class="contact-item-bottom">
                                <p>yh4008003826</p>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>
            <div class="footer-middle">
                <ul>
                    <li class="site-row">
                        <div class="site-wrap">
                            <b>成都总部</b>
                            <div class="site-info">
                                <p>地址：成都市高新区软件园蜀都中心1栋24楼</p>
                                <p>电话：028-87737982     15108280685（冉总）</p>
                            </div>
                        </div>
                         <div class="site-wrap">
                            <b>云浩湖南</b>
                            <div class="site-info">
                                <p>地址：湖南省长沙市芙蓉区韶山北路109号君临天厦君惠楼2008</p>
                                <p>电话：028-87737981      18573159031</p>
                            </div>
                        </div>
                    </li>
                    <li class="site-row">
                        <div class="site-wrap">
                            <b>云浩重庆</b>
                            <div class="site-info">
                                <p>地址：重庆市江北区观音桥红鼎国际A座22-10</p>
                                <p>电话：18083009409</p>
                            </div>
                        </div>
                         <div class="site-wrap">
                            <b>云浩湖北</b>
                            <div class="site-info">
                                <p>地址：湖北省武汉市江汉区前进一路六渡桥同益大厦C座4楼</p>
                                <p>电话：18171057668    18607158341</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="footer-bottom">
                <p><span>川公网安备</span>51010602000516号蜀CP备11000144号-1<b>云浩</b></p>
                <p>&copy;2012-2019  cloudvast.com</p>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
@import '../assets/css/variable.less';
    .footer{
        // height: 926 * @crem;
        min-width: 768px;
        // min-width: 786px;
        padding-bottom: 72 * @crem;
        width: 100%;
        box-sizing: border-box;
        padding-top: 32 * @crem;
        background: #4B94EC url('../assets/imgs/home/footer_bg.jpg') center top -2px no-repeat;
        background-size: contain;
        @media screen and (max-width: 1024px){
            .erweima img,p,b{
                transform: scale(.8);
            }
            .footer-middle p,
            .footer-bottom p{
                margin-top: 10 * @crem;
            }
            .erweima{
                transform: scale(.7);
            }
        }
        .footer-wrap{
            margin: 0 200 * @crem;
        }
        .footer-top{
             padding-bottom: 30 * @crem;
             border-bottom: 1px dashed #FFFFFF;
            .footer-top-pic{
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-between;

            }
            .footer-top-pic-left{
                padding-top: 28 * @crem;
                img{
                    height: 80 * @crem;
                }
                .contact-me{
                    margin-top: 27 * @crem;
                    display: flex;
                    flex-flow: row nowrap;
                    align-items: center;
                    font-size: 46 * @crem;
                    font-weight: 500;
                    color: #fff;
                    .custom-log{
                        width: 26 * @crem;
                        height: 26 * @crem;
                        border-radius: 50%;
                        position: relative;
                        background: #D4A5FF;
                        overflow: hidden;
                        margin-right: 13 * @crem;
                    }
                    .custom-log::before,.custom-log::after{
                        content: '';
                        display: block;
                        position: absolute;
                        width: 100%;
                        height: 4 * @crem;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        margin: auto;
                        background: #4B94EC;
                        z-index: 10;
                    }
                    .custom-log::after{
                        transform: rotate(90deg);
                    }
                }
            }
            .erweima{
                width: 500 * @crem;
                // height: 231 * @crem;
                box-sizing: border-box;
                padding: 34 * @crem 28 * @crem;
                border-radius: 50 * @crem;
                background: url('../assets/imgs/home/footer_erweima.png') no-repeat;
                background-size: cover;
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-between;
                align-items: flex-end;
                .erweima-left{
                    font-size: 16 * @crem;
                    font-weight: 500;
                    color: #fff;
                    text-align: left;
                }
                .ermeima-wrap ul{
                    display: flex;
                    flex-flow: row nowrap;
                    li{
                        margin-left: 10 * @crem;
                        img{
                            width: 130 * @crem;
                            height: 130 * @crem;
                        }
                        p{
                            margin-top: 6 * @crem;
                            text-align: center;
                            font-size: 10 * @crem;
                            font-weight: 500;
                            color: #fff;
                            // white-space: nowrap;
                        }
                    }
                }
            }
           .footer-contacts{
               margin-top: 48 * @crem;
               ul{
                   display: flex;
                   flex-flow: row nowrap;
                   justify-content: space-between;
                   li{
                       display: flex;
                       flex-flow: column nowrap;
                       justify-content: flex-start;
                       align-items: center;
                   }
                   .contact-item-top{
                       font-weight: bold;
                       font-size: 20 * @crem;
                       color: #FFFFFF;
                       .iconfont{
                           font-size: 40 * @crem;
                       }
                       p{
                           margin-top: 15 * @crem;
                       }
                   }
                   .contact-item-bottom{
                       margin-top: 37 * @crem;
                       font-size: 16 * @crem;
                       color: #FFFFFF;
                   }
               }

           } 
          

        }
    .footer-middle{
        padding-top: 35 * @crem;
        padding-bottom: 30 * @crem;
        border-bottom: 1px dashed #FFFFFF;
        ul{
            display: flex;
            flex-flow: row nowrap;
        }
        li{
            flex: 1;
            display: flex;
            flex-flow: column nowrap;
            align-self: flex-start;
            text-align: left;
            .site-wrap{
                display: flex;
                flex-flow: column nowrap;
                align-items: flex-start;
                color: #fff;
                b{
                    font-size: 20 * @crem;
                    font-weight: bold;
                    color: #fff;
                }
                .site-info{
                    margin-top: 25 * @crem;
                    font-size: 16 * @crem;
                    color: #fff;
                    line-height: 25 * @crem;
                    // display: flex;
                    // flex-flow: column nowrap;
                    // align-items: flex-start;
                    p{
                        white-space: nowrap;
                    }
                }
            }
            .site-wrap:last-child{
                margin-top: 46 * @crem;
            }
        }
        @media screen and(min-width:1024px) {
            li:last-child{
                padding-left: 300 * @crem;
            }
        }
        
    }
    .footer-bottom{
        padding-top: 32 * @crem;
        line-height: 25 * @crem;
        font-size: 16 * @crem;
        color: #fff;
        span{
            margin-right: 15 * @crem;
        }
        b{
            font-weight: 400;
            margin-left: 40 * @crem;
            letter-spacing: 2px;
        }
    }
    }
</style>